<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器的格式：#id的名称{}
         好处：id必须保证全局唯一
            优先级：id选择器 > 类选择器 > 标签选择器
         */

        #davidniu{
            color: #a6317d; /* 设置文字颜色 */
        }
        #scott{
            color: #0e89e4; /* 设置文字颜色 */
        }
        .smith{
            color: #e4b20e; /* 设置文字颜色 */
        }
        p{
            background: #b4f447;
        }

        /*后代选择器 */
        body p{
            background: #f3e3e3; /* 设置页面背景颜色 */
        }
        /*子选择器 */
        body>p{
            background: #e33838; /* 设置页面背景颜色 */
        }
        /*相邻兄弟选择器 只有一个（向下）*/
        .active+p{
            background: #e60b9c; /* 设置页面背景颜色 */
        }

        /*通用兄弟选择器 当前元素的向下的所有兄弟元素（不包括自己） class id都可以*/
        #active~p{
            background: #276a9c; /* 设置页面背景颜色 */
        }
    </style>
</head>
<body>
<p>    P0: 这是一个简单的HTML页面示例。您可以在这里添加更多内容。</p>
<p  id="active">    P1: 这是一个简单的HTML页面示例。您可以在这里添加更多内容。</p>
<p>    P2: 这是一个简单的HTML页面示例。您可以在这里添加更多内容。</p>
<p>    P3: 这是一个简单的HTML页面示例。您可以在这里添加更多内容。</p>
<ul>
    <li>列表项1
        <p>这是一个段落，位于列表项1中。 </p>
        <p>这是另一个段落，位于列表项1中。</p>
    </li>
    <li>列表项2
    <p>这是一个段落，位于列表项2中。</p>
    </li>
    <li>列表项3
    <p>这是一个段落，位于列表项3中。</p>
    </li>
</ul>
<p>    P9: 这是一个简单的HTML页面示例。您可以在这里添加更多内容。</p>
<p>    P10: 这是一个简单的HTML页面示例。您可以在这里添加更多内容。</p>
</body>
</html>